/*
 *@description:自定义节点组件
 *@Author:@rennan
 *@Date:2024-09-23 17:10:08
 *@version: V1.0.0
*/
<template>
  <div class="box">
    <div class="box_top">
      <img @click="handleClick" class="demo_icon" src="../imgs/img5.png" alt="">
      <input v-if="isClick" type="text" v-model="title">
      <span v-else>{{ title }}</span>
    </div>
    <div class="box_bootom">
      {{ desc }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '节点名称'
    },
    desc: {
      type: String,
      default: '节点描述'
    }
  },
  data() {
    return {
      // text:''
      name: '',
      isClick: false
    };
  },
  methods: {
    handleClick() {
      this.isClick = !this.isClick;
    }
  }

};
</script>
<style scoped>
.box {
  width: 200px;
  height: 80px;
  color: #7f7e7e;
  font-size: 600;
  border: 1px solid #8486f8;
  background: rgba(132, 134, 248, 0.15);
  padding: 5px 8px;
}

.box_top {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.box_top .demo_icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.box_bootom {
  margin-top: 10px;
  font-size: 14px;
  font-size: 400;
}
</style>
